<template>
  <div class="activitiesMain displayFlex headerTopMain">
    <div class="activitiesLeft">
      <article class="activitiesArt">
        <aside>
          <p>精彩活动<span>Exciting Activities</span></p>
          <p>
            <router-link :to="{name:'activity',query:{id:'-100',n:3}}">
              <span><Icon type="ios-plus-empty"></Icon></span>更多活动
            </router-link>
          </p>
        </aside>
        <section class="activitiesSec">
          <ul class="displayFlex">
            <li v-for="(act,actIndex) in activitiesData" v-if="actIndex<3">
              <router-link :to="{name:'activity',query:{id:'-100',n:3,activityId:act.id}}">
                <article class="javaArticle">
                  <p class="actImg"><img :src="act.coverPic" alt=""></p>
                  <p class="title one-txt-cut" :title="act.title">{{act.title}}</p>
                  <p class="time">活动时间：<span>{{_Util.formatDateTime(act.startTime,0,'/')}}~{{_Util.formatDateTime(act.endTime,0,'/')}}</span>
                  </p>
                </article>
              </router-link>
            </li>
          </ul>
        </section>
      </article>
    </div>
    <div class="activitiesRight">
      <article class="activitiesArt">
        <aside>
          <p class="actP">服务优势<span>Service Advantage</span></p>
        </aside>
        <div class="activitiesDiv">
          <ul>
            <li v-for="server in serverData" class="displayFlex">
              <div class="actLi displayFlex">
                <p><img :src="server.img" alt=""></p>
                <p class="title">
                  <span>{{server.name}}</span><span>{{server.info}}</span>
                </p>
              </div>
              <div class="actTime" v-html="server.num"></div>
            </li>
          </ul>
        </div>
      </article>
    </div>
  </div>
</template>

<script>
  import './activities.scss';
  import {mapState} from 'vuex';
  
  export default {
    data() {
      return {
        activitiesData: [], // 精彩活动列表
        serverData: [
          {
            img: require("../../../assets/images/home/lottery/icon01.png"),
            name: "存款到账",
            info: "平均时间",
            num: "<span>18</span>秒"
          },
          {
            img: require("../../../assets/images/home/lottery/icon02.png"),
            name: "快捷提现",
            info: "平均时间",
            num: "<span>2.6</span>分"
          },
          {
            img: require("../../../assets/images/home/lottery/icon03.png"),
            name: "资金安全",
            info: "客户投诉率",
            num: "<span>0.0</span>%"
          }
        ]
      }
    },
    computed: {
      ...mapState({
        homeData: state => state.mutations.homeStateData, //登录状态
      })
    },
    mounted() {
      this.init();
    },
    activated() {
      this.init();
    },
    methods: {
      init() {
        this.activitiesData = this.homeData.activeList || [];
      },
    },
    watch: {
      'homeData'() {
        this.init();
      }
    }
  }
</script>
